function init_compass() {
    var canvas = document.getElementById('compass');
 
    if(canvas.getContext('2d')) {
        ctx = canvas.getContext('2d');

        needle = new Image();
        needle.src = 'arrow.png';

        img = new Image();
        img.src = 'compass.png';
        img.onload = imgLoaded;
    } else {
        alert("Canvas not supported!");
    }
}

function imgLoaded() {
    setTimeout(draw_compass, 0, 0);
	setTimeout(draw_compass, 1000, 92);
	setTimeout(draw_compass, 2000, 100);
	setTimeout(draw_compass, 3000, 233);
}

function draw_compass(degrees) {
    ctx.drawImage(img, 0, 0);
    ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(degrees * (Math.PI / 180));
    ctx.drawImage(needle, -100, -100);
    ctx.restore();
}